<template>
  <el-row id="freeClass">
    <module-title :cn_name="'免费试听'" :en_name="'FREE CLASSES'"></module-title>
    <el-row class="freeClass">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-col :offset="4" :span="8">
        <el-form-item label="真实姓名">
          <el-input v-model="formInline.user" placeholder="你的姓名？"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="手机号码">
          <el-input v-model="formInline.phone" placeholder="手机号码？"></el-input>
        </el-form-item>
        </el-col>
        <el-col :offset="4" :span="8">
        <el-form-item label="QQ邮箱">
          <el-input v-model="formInline.email" placeholder="QQ邮箱？"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="8">
        <el-form-item label="试听课程">
          <el-input v-model="formInline.project" placeholder="前端/设计？"></el-input>
        </el-form-item>
        </el-col>
        <el-col>
          <el-button type="warning"  class="enroll-btn" size="large" @click="onSubmit">免费试听</el-button>
        </el-col>
      </el-form>

    </el-row>
  </el-row>
</template>
<script>
  import ModuleTitle from '../Common/module-title'
  export default {
    data(){
      return {
        formInline: {
          user: '',
          phone: '',
          email:'',
          project:''
        }
      }
    },
    components : {ModuleTitle}
  }
</script>
<style>
  #freeClass{
    padding-bottom: 50px
  }
  .freeClass {
    min-height: 330px;
    background: url('../../assets/images/listen.png') no-repeat center;
  }
.demo-form-inline .el-form-item {
  margin-top: 55px;
}
</style>
